<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/masterLayout.xhtml">


	<ui:define name="pageTitle">#{out.orders_title}</ui:define>
	<ui:define name="header"> -> #{out.orders_title}</ui:define>

	<ui:define name="head-extra">
		<!-- custom css -->
	</ui:define>

	<ui:define name="content">
		<!-- <p:growl id="msgs" showDetail="true" /> -->

		<p:dialog id="viewOrderDetailsDialog"
			header="#{out.orders_details_dialog_head}" widgetVar="dlg_edit"
			modal="true" resizable="false">
			<h:form>
				<div class="ui-grid ui-grid-responsive ui-grid-row ui-grid-col-6">
					<h:panelGrid columns="2" style="width:100%" cellpadding="5">
						<h:outputText value="#{out.orders_details_dialog_name}:" />
						<h:outputText value="#{orderController.selectedOrder.name}" />

						<h:outputText value="#{out.orders_details_dialog_date}:" />
						<h:outputText value="#{orderController.selectedOrder.date}" />
					</h:panelGrid>
					<p:commandButton update=":selectedPartnerForm" ajax="false"
						validateClient="false" immediate="true"
						action="#{orderController.unselectOrder()}" icon="ui-icon-close"
						title="#{out.orders_details_dialog_cancel}"
						value="#{out.orders_details_dialog_cancel}">
					</p:commandButton>
				</div>
			</h:form>
		</p:dialog>

		<p:dialog id="selectPartnerDialog"
			header="#{out.orders_selectpartner}" widgetVar="dlg_select"
			modal="true" resizable="false">
			<h:form id="selectPartnerForm">
				<p:messages id="mess" for="selectmsgs" showDetail="true"
					autoUpdate="true" closable="true" />
				<p:selectOneListbox id="partnerList" style="margin: 0 auto"
					scrollHeight="150" value="#{orderController.selectedPartnerName}"
					var="p" filter="true" filterMatchMode="contains">
					<f:selectItems value="#{orderController.partnerNames}"
						var="partner" itemLabel="#{partner}" />
					<p:column>
						<h:outputText value="#{p}" />
					</p:column>
				</p:selectOneListbox>
				<h:panelGrid columns="2" cellpadding="5">
					<p:commandButton value="#{out.orders_select}" icon="ui-icon-eject"
						update=":createOrderDialog"
						actionListener="#{orderController.selectPartner()}" />
					<p:commandButton update=":orderForm" ajax="false"
						validateClient="false" immediate="true"
						action="#{orderController.unselectOrder()}" icon="ui-icon-close"
						title="#{out.orders_create_dialog_cancel}"
						value="#{out.orders_create_dialog_cancel}">
					</p:commandButton>
				</h:panelGrid>
			</h:form>
		</p:dialog>

		<p:dialog id="createOrderDialog"
			header="#{out.orders_create_dialog_head}" widgetVar="dlg_create"
			modal="true" resizable="false">

			<h:form id="dialogForm">
				<div class="ui-grid ui-grid-responsive ui-grid-row ui-grid-col-6">
					<p:messages id="messages" for="createmsgs" showDetail="true"
						autoUpdate="true" closable="true" />
					<h:panelGroup>
						<div style="text-align: center">
							<p:outputLabel
								value="#{out.orders_partner_name}: #{orderController.selectedPartnerName}" />
						</div>
					</h:panelGroup>
					<p:separator style="width:100%;height:10px" />
					<h:panelGrid columns="2" cellpadding="5">
						<p:outputLabel value="Select a product " for="product" />
						<p:autoComplete id="product"
							value="#{orderController.selectedProduct}"
							completeMethod="#{orderController.completeText}" var="c"
							itemLabel="#{c.name}" itemValue="#{c}"
							converter="productConverterOfOrderController" />
						<p:outputLabel value="#{out.worker_order_quantity}: "
							for="quantity" />
						<p:inputText id="quantity" value="#{orderController.quantity}" />
						<p:commandButton ajax="true"
							action="#{orderController.addProductToOrder()}"
							validateClient="true" update=":dialogForm" title="Add"
							value="#{out.recipes_newRecipe_addButton}" />
					</h:panelGrid>

					<p:dataTable id="addedProducts" var="registry"
						value="#{orderController.addedProducts}"
						emptyMessage="#{out.empty_message}">
						<p:column headerText="Name">
							<h:outputText value="#{registry.product.name}" />
						</p:column>
						<p:column headerText="#{out.worker_order_quantity}">
							<h:outputText value="#{registry.quantity}" />
						</p:column>
						<p:column width="5%">
							<p:commandButton icon="ui-icon-trash" title="Delete"
								style="align:center"
								actionListener="#{orderController.removeBeerFromOrder(registry)}"
								update="addedProducts" ajax="true" />
						</p:column>
					</p:dataTable>

					<h:panelGrid columns="2" cellpadding="5">
						<p:commandButton value="#{out.orders_create_dialog_create}"
							update=":orderForm:orderTable,addedProducts" icon="ui-icon-eject"
							actionListener="#{orderController.createOrder()}" />
						<p:commandButton update=":orderForm" ajax="false"
							validateClient="false" immediate="true"
							action="#{orderController.unselectOrder()}" icon="ui-icon-close"
							title="#{out.orders_create_dialog_cancel}"
							value="#{out.orders_create_dialog_cancel}">
						</p:commandButton>
					</h:panelGrid>
				</div>
			</h:form>
		</p:dialog>

		<h:form id="orderForm">
			<p:dataTable id="orderTable" var="currentOrder"
				value="#{orderBean.orderModel}" rowKey="#{currentOrder.id}"
				paginator="true" rows="10"
				paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
				rowsPerPageTemplate="5,10,15" lazy="true"
				emptyMessage="#{out.empty_message}">
				<p:ajax event="rowSelect" listener="#{orderController.onRowSelect}"
					update=":orderCommandsForm,:viewOrderDetailsDialog" />
				<p:ajax event="rowUnselect"
					listener="#{orderController.onRowUnselect}"
					update=":orderCommandsForm,:viewOrderDetailsDialog" />
				<p:column style="width:3%">
					<p:rowToggler />
				</p:column>
				<p:column headerText="#{out.orders_form_name}"
					sortBy="#{currentOrder.name}">
					<h:outputText value="#{currentOrder.name}" />
				</p:column>
				<p:column headerText="#{out.orders_form_date}"
					sortBy="#{currentOrder.date}">
					<h:outputText value="#{currentOrder.date}" />
				</p:column>
				<p:column headerText="#{out.orders_form_status}"
					sortBy="#{currentOrder.status}">
					<h:outputText
						value="#{currentOrder.status}" />
				</p:column>

				<p:rowExpansion>
					<p:dataTable
						value="#{orderController.findByOrder(currentOrder)}"
						var="registry" emptyMessage="#{out.empty_message}">
						<p:column headerText="Product name">
							<h:outputText value="#{registry.product.name}" />
						</p:column>
						<p:column headerText="#{out.worker_order_quantity}">
							<h:outputText value="#{registry.originalQuantity}" />
						</p:column>
					</p:dataTable>
				</p:rowExpansion>

			</p:dataTable>
		</h:form>

		<h:form id="orderCommandsForm">
			<h:panelGrid columns="4" cellpadding="5">
				<p:commandButton icon="ui-icon-arrowrefresh-1-n"
					title="#{out.orders_buttons_create}"
					value="#{out.orders_buttons_create}" type="button"
					onclick="PF('dlg_select').show()">
				</p:commandButton>
			</h:panelGrid>
		</h:form>

	</ui:define>
</ui:composition>